<template>
  <div class="list_details">
    <div class="top">
      <TopNav style="background-color: #fff;" :title="data.nickname + '详情'"></TopNav>
    </div>
    <div class="main">
      <div class="count">
        <div class="left">
          <van-image radius="5px" width="50" height="50" :src="data.avatar" />
        </div>
        <div class="center">
          <h4>{{ data.nickname }}</h4>
          <p>昵称：{{ data.username }}</p>
          <p>微信号：{{ data.username }}</p>
        </div>
        <div class="right">
          <van-icon name="star-o" :size="20" />
        </div>
      </div>

      <div :class="['text_tab', i.value === 2 || i.value === 4 ? 'bottom' : '']" v-for="i in btn" :key="i.value"
        :id="i.value === 5 || i.value === 6 ? 'flex' : ''" @click="msgsnd(i.value)">
        <van-icon name="chat-o" v-show="i.value === 5" />
        <van-icon name="desktop-o" v-show="i.value === 6" />
        <p>{{ i.title }}</p>
        <van-icon name="arrow" v-show="i.value < 5" />
      </div>
    </div>
    <chatWindow :showDetails="showDetails" :toUser="toUser" :propsItem="propsItem"
      @clearContactDetails="clearContactDetails" />
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import history from '@/router'
import TopNav from '@/components/TopNav.vue'

// 设置选项
const btn = reactive([
  {
    value: 1,
    title: '设置备注和标签'
  },
  {
    value: 2,
    title: '朋友权限'
  },
  {
    value: 3,
    title: '朋友圈'
  },
  {
    value: 4,
    title: '更多信息'
  },
  {
    value: 5,
    title: '发消息'
  },
  {
    value: 6,
    title: '音频通话'
  },
])
const showDetails = ref(false)
const toUser = ref({})
const propsItem = ref({})

// 获取路由传递参数
const data = JSON.parse(history.currentRoute._value.query.contactDetails).arr[0]



// 点击列表
const msgsnd = (value) => {

  // 1
  // 2
  // 3
  // 4
  // 5
  value === 5 && (
    showDetails.value = true,
    toUser.value = data,
    propsItem.value = data,
    console.log(propsItem.value)
  )
  // 6
}


const clearContactDetails = () => {
  showDetails.value = false;
};




</script>

<style scoped>
.list_details {
  width: 100%;
  height: 100%;
  background-color: #ededed;

  .main {
    width: 100%;
    height: 100%;

    .count,
    .text_tab,
    .btn {
      padding: 0px 10px 0 10px;
      border-bottom: 1px solid #fefefe;
    }

    .count {
      width: 100%;
      padding-bottom: 20px;
      display: flex;
      justify-content: space-between;
      background-color: #fff;

      .center {
        line-height: 25px;
      }
    }

    #flex {
      display: flex;
      justify-content: center;
      align-items: center;
      color: #65768d;
      font-size: 19px;
    }

    .text_tab {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #fff;
      width: 100%;
      height: 50px;
    }

    .bottom {
      margin-bottom: 10px;
    }
  }
}
</style>